<template>
  <div>
    <!-- 1 给h1起一个名字 -->
    <h1 ref="yhb">vue的生命周周期</h1>
    <p>{{ num }}</p>
    <button @click="handleClick">更新</button>
    <button @click="handleDel">销毁</button>
  </div>
</template>
<script>
export default {
  // 存储变量
  data() {
    return {
      num: 1,
    };
  },
  // 放函数的位置
  methods: {
    handleDel() {
      this.$destroy();
    },
    handleClick() {
      this.num++;
    },
    handleSearch() {
      console.log("于鸿斌666");
    },
  },
  // 无法使用函数和变量的，因为没有vue还没有创建
  beforeCreate() {
    console.log("vue实例创建之前-1", this.num);
  },
  // **created因为已经创建完成所以里面可以使用函数和变量，不需要操作dom的时候，可以在这里调用接口掉函数。工作中经常用到的
  created() {
    console.log("vue实例创建之后-2");
    // created不允许操作dom，如何在created中获取dom?
    // 方法1 加延时器
    // setTimeout(()=>{
    //     console.log(this.$refs.yhb,"获取dom元素,延时器")
    // },500)
    // 方法2 $nextTick
    this.$nextTick(() => {
      console.log(this.$refs.yhb, this,"获取dom元素,$nextTick");
    });
  },
  beforeMount() {
    console.log("dom加载完成之前-3");
  },
  // ***mounted：dom加载完成之后，如果有dom操作的时候一般在这里面操作dom，并且可以调用接口。工作中经常用到的
  mounted() {
    console.log("dom加载完成之后-4");
    console.log(this.$refs.yhb, "获取dom元素");
    this.handleSearch();
  },
  beforeUpdate() {
    console.log("vue数据更新之前-5");
  },
  updated() {
    console.log("vue数据更新之后-6");
  },
  beforeDestroy() {
    console.log("vue实例销毁之前-7");
  },
  destroyed() {
    console.log("vue实例销毁之后-8");
  },
};
/*
    面试题：什么是vue的生命周期？生命周期的作用？生命周期有哪些？第一次加载页面会触发几个钩子函数(生命周期)

    生命周期：就是从vue创建到销毁的过程。(通俗易懂的来说就是从出生到死亡的过程)
    生命周期的作用就是在不同阶段对应的钩子函数可以实现组件的数据管理和dom渲染两大功能。（在哪个年龄段干个什么事情）

    第一次加载页面会触发前四个钩子函数：
        beforeCreate：vue实例创建之前：加一个加载动画，防止白屏
        *created：vue实例创建之后,一般在这里调用接口
        beforeMount：dom加载完成之前
        *mounted：dom加载完成之后，一般在这里操作dom

        beforeUpdate：vue数据更新之前
        updated：vue数据更新之后
        beforeDestroy：vue实例销毁之前
        destroyed：vue实例销毁之后
*/
</script>